<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.4.1.min.js"></script>
    <style>
        body{
            margin-bottom: 1000px;
        }
        .box{height: 200px;width: 200px;background-color: chartreuse;}
        .box2{border-radius: 50px;background-color: aqua;}
        .test{
            background-color: #ffff00;
            width: 200px;
            height: 200px;
            border: 2px solid;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="div1 box">
        <h1>捕获</h1>
        <p class="p1">测试驱动程序</p>
    </div>
    <button id="btn1">设置|返回</button>
    <button id="btn2">切换样式</button>
    <input id="input1" type="text" />
    <div id="div2" class="box"></div>

    <button class="btn_1">正方形</button>
    <button class="btn_2">长方形</button>
    <button class="btn_3">圆角</button>
    <button class="btn_4">圆形</button>
    <div class="test"></div>

    <script>
        $(".div1").click(function () {
            alert($(".p1").text())
            alert($(".div1 h1").html())
            alert("捕获输入写字段：",$("#input1").val())
            alert("捕获属性值:",$("#input1").attr("id"))
        })
        $("#btn1").click(function() {
            $(".p1").text("O(∩_∩)O哈哈~，我是谁？？？？").append("-----我是被后来增加的元素").prepend("我是在开头增加的元素---")
            $("#input1").val("测试吗？？")
            //$(".div1").html("<h2>O(∩_∩)O哈哈~，我是h2吼吼</h2>")
        })
        $("#btn2").click(function () {
            $("#div2").toggleClass("box2")
        })
        $("#div2").click(function () {
            $("#div2").animate({
                width:"100%",
                borderRadius:'50%',
            },3000,"swing",function () {
                $("#div2").animate({
                    width:'100px',
                    height:'100px',
                })
        })
        })



        $(".btn_1").click(function () {
            $(".test").animate({
                width:'200px',
                height:'200px',
                borderRadius:'0',
                backgroundColor:'#ff0000'
            })
        })
        $(".btn_2").click(function () {
            $(".test").animate({
                width:'400px',
                height:'200px',
                borderRadius:'0',
                backgroundColor:'red'
            })
        })
        $(".btn_3").click(function () {
            $(".test").animate({
                borderRadius:'10px',
                backgroundColor:'#00711d'
            })
        })
        $(".btn_4").click(function () {
            $(".test").animate({
                width:'200px',
                height:'200px',
                borderRadius:'50%',
                backgroundColor:'#ffff00'
            })
        })
    </script>
</body>
</html>